<template>
	<view class="box" >
		<video src="" controls></video>
		<view class="header-top" v-for="(item,id) in videoList" :key='id'>
			
			<view class="header-content">
				<text class="content-title">{{item.headertitle}}</text>
				<text class="bottom"></text>
			</view>
			<view class="header-bottom">
				<text class="bottom-title">{{item.bottomtitle}}</text>
				<text class="bottom-text">{{item.text}}</text>
				<text class="bottom-text">{{item.text}}</text>
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="Bottom">
			<!-- 版权所有 -->
			<view class="login-type-top">专注中国养老事业</view>
			<view class="login-type-bottom" :class="'text-' + themeColor.name">
				{{ appName }} 版权所有 logo
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				// 版本所有
				appName: this.$mSettingConfig.appName,
				
				videoList: [
					{
						id: '0',
						image: '',
						headertitle: '芥子园画谱之画石法',
						bottomtitle: '课程介绍',
						text: '尊老敬老是中华民族的传统美德，也是全面贯彻落实科学发展观、构建和谐社会的重要内容。经常开展敬老宣传教育活动，对增强全社会的老龄意识和敬老意识，营造敬老养老助老的浓厚氛围，激发老年人发挥余热、奉献社会的热情，促进全市经济社会更好更快发展具有重要意义。'
					},
				]
			}
		},

		onLoad(options) {
			this.id = options.id;
			console.log('传过来的id值为：' + options.id);
			// let that = this
			// uni.request({
			// url:`${this.$serverUrl}/pages/oldxue/oldBox/oldvideo/${this.id}/`,
			// header:{
			// 'Authorization': this.uerInfo.token
			// },
			// success(res){
			// console.log(res)
			// that.opportunity = res.data;
			// }
			// })
		}
	}
</script>

<style scoped>
	page{
		font-family: '宋体';
	}
	.header-top{
		width: 100%;
	}
	.box video{
		width: 100%;
		height: 200px;
		background-color: #666;
		margin: 20upx 0 20upx 0;
		border-radius: 2%;
	}
	.content-title{
		font-size: 18px;
		font-weight: 600;
		color: #666;
	}
	.header-content{
		margin: 20upx;
		border-bottom:2px solid #ADADAD;
	}
	.header-bottom{
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.header-bottom .bottom-title{
		margin-top: 10upx;
		color: #666;
		font-size: 16px;
		font-weight: 900;
		margin-bottom: 20upx;
	}
	.header-bottom .bottom-text{
		color: #333333;
		font-size: 16px;
		margin: 5upx 5upx 0 5upx;
	}
	.Bottom{
		padding-top: 60upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
</style>
